<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>jSearch</title>
    <meta baseurl="http://">
    <base target="_blank">
    <link rel="stylesheet" type="text/css" href="../public/iview.css">
    <link rel="stylesheet" type="text/css" href="../content/search_bar.css">
    <link rel="stylesheet" type="text/css" href="./result.css">
    <script src="../public/platform.js"></script>
    <script src="../public/jquery-3.3.1.min.js"></script>
    <script src="../public/axios.min.js"></script>
    <script type="text/javascript" src="../public/vue-dragging.js"></script>
    <script type="text/javascript" src="../public/vue.min.js"></script>
    <!--iview 3.2.2-->
    <script type="text/javascript" src="../public/iview.min.js"></script>
    <style>

        html,body{
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }

        .content{
                width: 100%;
                height: 500px;
                overflow: hidden;
                position: fixed;
                background-color: rgba(255, 255, 255, 0.8);
            }
            .content::before{
                content: ' just Search it';
                text-align: center;
                width: 100%;
                line-height: 100%;
                display: block;
                top: 67%;
                font-size: 53px;
                font-family: fantasy,monospace;
                position: fixed;
                color: rgb(92, 92, 92);
                filter: blur(2px);
            }
            
            .layout::before{
                background: url('/public/jsearch-logo.svg') no-repeat center 100px;
                
                background-size: auto 50%;
                width: 100%;
                height: 100%;
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                z-index: 0; /*z-index 设为 -1时 父元素必须绝对定位，只在这框架里有此问题，不知是 vue 的锅还是 iview 的；*/
                filter: blur(10px);
            }
            .slider{
                overflow-x: auto;
                overflow-y: hidden;
                display: flex;
                height: 100%;
                width: 100%;
            }
            .col{
                height: 100%;
                width: 600px;
                float: left;
                padding: 0 2px 0 2px;
                flex-shrink: 0;
                flex-grow:1;
                transition: all .8s
            }
            .list-over{color:#c5c8ce;}
            .col .ivu-scroll-content{min-height: 100%;}/*解决第一页高度不够无法翻页问题*/
            .ivu-card{
                background-color: rgba(255, 255, 255, 1);
            }
            .alipay .slid-show{
                transition: max-height 1s;
                max-height:0px;
                display: block;
                overflow: hidden;
            }

            .alipay:hover .slid-show{
                max-height: 250px;
            }
            @-webkit-keyframes alipay{
                from {height: 0px;}
                to{height: 100px;}
            }
            .header_bar{
                background-color: rgba(255,255,255,0.8);    
                box-shadow: 0 0 1px rgba(0,0,0,0.25);
                top:-100px;    
                position: fixed;
                width:100%;    
                z-index: 1000;
                transition: all .8s cubic-bezier(0.68,-0.55, 0.19, 2.03);
            }
            .down{top:0;}
            .top_area{
                width: 100%;
                height: 20px;
                position: fixed;
                z-index: 900;
            }
            .ivu-form-item {
    margin-bottom: 14px;}
            
            .drawer-footer{
                position: absolute;
                bottom: 5px;
                left: 0;
                box-shadow: 0 -1px 1px rgba(0,0,0,0.15);
                padding-top: 5px;
                background: rgba(255,255,255,0.6);
            }

            /* VUE过渡动画   可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-list-enter-active {
  transition: all 1s ease;
}
.slide-list-leave-active {
  transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-list-enter, .slide-list-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
[v-cloak]{
        display : none;
}

body .ivu-icon{
    font-family: Ionicons !important;
}

/*字体覆盖*/
.col *{
    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif !important;
    color:rgb(136, 136, 136);
    line-height:24px !important;
}
.col a,.col cite{
    font-size: 12px !important;
    color: rgb(187, 187, 187)  !important;
    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif !important;
    font-style: normal;
}
.col h2,.col h3,.col h3>a,.col h2>a,.col h2 strong ,.txt-box>.tit>a{
    font-size: 18px !important;
    font-weight: 700 !important;
    color: rgb(51, 51, 51)  !important;
    margin-bottom: 6px;
}
/*关键词*/
.green .c-container em, .green .g em, .green  li.b_algo p strong, .green li.b_algo h2 strong, .green .news-list2 em, .green .news-list em{
    color: #00a06a !important;
}
.red .c-container em, .red .g em, .red  li.b_algo p strong, .red li.b_algo h2 strong, .red .news-list2 em, .red .news-list em{
    color: #ec665a !important;
}
.blue .c-container em, .blue .g em, .blue  li.b_algo p strong, .blue li.b_algo h2 strong, .blue .news-list2 em, .blue .news-list em{
    color: #3d86e4 !important;
}
.black .c-container em, .black .g em, .black  li.b_algo p strong, .black li.b_algo h2 strong, .black .news-list2 em, .black .news-list em{
    color: rgb(51, 51, 51) !important;
}
/*统一风格*/
.c-container ,.g ,.b_algo{
    border-bottom: 1px solid #f2f2f2 !important;
    padding: 16px 0 !important;
}
    </style>
</head>

<body>

    <div id="app" v-cloak>

        <Layout class="layout">
            <div class="top_area"></div>
            <i-header class="header_bar">
                <Row type="flex" align="middle" class="opacity-7">
                    <i-col span="12"><span style="font-size:24px;font-weight:bold;color: #2d8cf0;">jSearch<span style="font-size:14px;">&nbsp;聚搜</span></span>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>just Search it!</strong></i-col>
                    <i-col span="9">
                        <form v-bind:action="'#'+searchInputValue" target="_top">
                            <i-input search placeholder="Enter something..." v-model="searchInputValue" @on-search="searchInputSubmit"></i-input>
                        </form>
                    </i-col>
                    <i-col span="1"> </i-col>

                    <i-col span="1">
                        <i-button type="text" shape="circle" @click="drawer.show = true" style="background:none;box-shadow:none;">
                            <Badge :text="version.notice">
                                <Icon type="ios-cog-outline" :size='30' />
                            </Badge>
                        </i-button>
                    </i-col>
                    <i-col span="1" style="text-align:center;"><a href="https://github.com/dubox/jSearch" target="_blank">
                            <Icon type="logo-github" :size='30' />
                        </a></i-col>
                </Row>

            </i-header>

            <div :class="'content '+ settings.kwColor" v-bind:style="{height:clientHeight+'px'}">

                <transition-group name="slide-list" class="slider" tag="div">
                    <div class="col" v-bind:style="{ width: settings.resultListWidth + 'px' }" v-for="(item1, index1) in searchData.models"
                        :key="item1" v-if="item1.show && searchData.results[index1][0]!='' && searchData.results[index1].length>0">

                        <Scroll v-if="item1.type!='bookmarks'" :on-reach-bottom="handleReachBottom(index1)" :height="clientHeight"
                            distance-to-edge="15">

                            <Card dis-hover v-for="(item, index) in searchData.results[index1]" :key="index" v-if="item!=''"
                                style="margin-bottom:5px;overflow: hidden;">

                                <span v-html="item"></span>

                            </Card>
                            <Alert class="opacity-7" type="warning" v-if="searchData.results[index1][searchData.results[index1].length-1] == ''">
                                No more ...
                            </Alert>

                        </Scroll>
                        <Scroll v-if="item1.type=='bookmarks'" :on-reach-bottom="handleReachBottom(index1)" :height="clientHeight"
                            distance-to-edge="15">

                            <Card dis-hover style="margin-bottom:5px;">
                                <div class="result c-container " v-for="(item, index) in searchData.results[index1]"
                                    :key="index">
                                    <h3 class="t">
                                        <img :src="'chrome://favicon/'+item.url" />
                                        <a :href="item.url" target="_blank"><span v-html="item.title"></span></a>

                                    </h3>
                                    <div class="c-abstract">

                                        <span class=" newTimeFactor_before_abs m">{{item.dateAdded}}&nbsp;-&nbsp;</span>
                                        {{item.url}} -
                                        <Icon :type="item.tag=='bookmark'?'ios-bookmark':'ios-time'" :title="item.tag" />
                                    </div>
                                </div>
                            </Card>
                            <Alert class="opacity-7" type="warning">No more ...</Alert>
                        </Scroll>

                    </div>
                </transition-group>


            </div>

        </Layout>


        <Drawer title="Settings" v-model="drawer.show" width="550" :mask-closable="true" :styles="drawer.styles">
            <Divider orientation="left" dashed style="font-size:12px;font-weight:normal;">版本信息</Divider>
            <Row type="flex">
                <i-col span="2"></i-col>
                <i-col span="22">
                    <span>当前版本：v{{version.localVer}}</span>
                    <span style="color:coral;" v-if="version.localVer==version.latestVer">
                        &nbsp;&nbsp;&nbsp;&nbsp;已是最新版</span>
                    <span style="color:coral;" v-if="version.notice=='new'">
                        &nbsp;&nbsp;&nbsp;&nbsp;发现新版本：<a href="https://github.com/dubox/jSearch/releases" target="_blank">v{{version.latestVer}}</a></span>
                </i-col>
            </Row>
            <Divider orientation="left" dashed style="font-size:12px;font-weight:normal;">配置站点</Divider>
            <i-form :model="searchData.models">

                <Row :gutter="32" type="flex" align="middle" v-for="(item, index) in searchData.models" v-dragging="{ item: item, list: searchData.models, group: 'models'}"
                    :key="index" :draggable="drawer.itemDraggable">
                    <i-col span="6">
                        <form-item>
                            <i-select v-model="item.type" placeholder="搜索引擎" :disabled="!item.canEdit">
                                <i-option value="baidu">百度</i-option>
                                <i-option value="google">谷歌</i-option>
                                <i-option value="bing">bing国际版</i-option>
                                <i-option v-if="item.type == 'bookmarks'" value="bookmarks">书签&浏览历史</i-option>
                                <i-option v-if="item.type == 'weixin' && item.symbol=='1'" value="weixin">公众号</i-option>
                                <i-option v-if="item.type == 'weixin' && item.symbol=='2'" value="weixin">公众号文章</i-option>

                            </i-select>
                        </form-item>
                    </i-col>
                    <i-col span="14">
                        <form-item>
                            <i-input :value="item.scope" @on-blur="if($event.target.composing)return;item.scope =$event.target.value;drawer.itemDraggable = true;"
                                placeholder="输入想要搜索的网站域名或一个Url" :disabled="!item.canEdit" autocomplete="on" @on-focus="drawer.itemDraggable = false;" />
                        </form-item>
                    </i-col>
                    <i-col span="4">
                        <form-item>
                            <i-switch v-model="item.show" />
                        </form-item>
                    </i-col>

                </Row>

            </i-form>

            <i-form :model="settingFormData">
                <Row :gutter="32" type="flex" align="middle">
                    <i-col span="6">
                        <form-item>
                            <i-select v-model="settingFormData.type" placeholder="please choose the type">
                                <i-option value="baidu">百度</i-option>
                                <i-option value="google">谷歌</i-option>
                                <i-option value="bing">bing国际版</i-option>
                            </i-select>
                        </form-item>
                    </i-col>
                    <i-col span="14">
                        <form-item>
                            <i-input v-model="settingFormData.scope" placeholder="输入想要搜索的网站域名或一个Url" />

                        </form-item>
                        <input style="display:none;" />
                    </i-col>
                    <i-col span="4">
                        <form-item>
                            <i-button type="primary" @click="settingAddSearchScope">Add</i-button>

                        </form-item>
                    </i-col>

                </Row>

            </i-form>
            <Divider orientation="left" dashed style="font-size:12px;font-weight:normal;">通用设置</Divider>
            <i-form :model="settingFormData">
                <Row :gutter="32" type="flex" align="middle">
                    <i-col span="17">
                        <form-item label="快捷搜索框(jBar):">
                            <checkbox-group v-model="settings.jBar.hotkeys">
                                <Checkbox label="space">空格</Checkbox>
                                <Checkbox label="j">j</Checkbox>
                                <Checkbox label="ctrl+j">Ctrl+j</Checkbox>
                                <Checkbox label="tab">Tab</Checkbox>
                                <Checkbox label="esc">ESC</Checkbox>
                            </checkbox-group>
                        </form-item>
                    </i-col>
                    <i-col span="6">
                        <form-item label="划词搜索">
                            <i-switch v-model="settings.jBar.onSelection" size="small" />
                        </form-item>
                    </i-col>
                    <i-col span="12">
                        <form-item label="在已有jSearch标签页中打开">
                            <i-switch v-model="settings.jBar.inExist" size="small" />
                        </form-item>
                    </i-col>

                </Row>
                <Row :gutter="32" type="flex" align="middle">
                    <i-col span="24">
                        <form-item label="页面横向滚动方案:">
                            <checkbox-group v-model="settings.pageScroll">
                                <Checkbox label="alt+mw">Alt+滚轮</Checkbox>
                                <Checkbox label="mLeftKey+mw">鼠标左键+滚轮</Checkbox>
                                <Checkbox label="navKeys">左右方向键</Checkbox>

                            </checkbox-group>
                        </form-item>
                    </i-col>

                </Row>
                <Row :gutter="32" type="flex" align="middle">
                    <i-col span="4">列表宽度:</i-col>
                    <i-col span="5">

                        <input-number :max="1000" :min="100" :step="50" v-model="settings.resultListWidth"></input-number>
                        <input style="display:none;" />
                    </i-col>
                    <i-col span="7">
                        顶部搜索条：
                            <i-switch v-model="settings.showHeadBar" size="small" />
                    </i-col>
                </Row>
                <Row :gutter="32" type="flex" align="middle">
                    <i-col span="24">
                            <form-item label="搜索词颜色:">
                        <radio-group v-model="settings.kwColor">
                            <Radio label="red" ></Radio>
                            <Radio label="green"></Radio>
                            <Radio label="blue"></Radio>
                            <Radio label="black"></Radio>
                        </radio-group>
                    </form-item>
                    </i-col>
                </Row>
            </i-form>
            <div class="drawer-footer">

                <Card style="width:50%;float: right;margin-right: 5px;" class="alipay">
                    <img src="../public/imgs/alipay.png" width="100%" class="slid-show">
                    <div style="text-align:center" class="slid-show">
                        <h5>您的捐赠是对我最大的鼓励和支持</h5>
                        <h5>Your donation is the greatest encouragement and support for me.</h5>

                        <Divider dashed style="margin:5px 0;"></Divider>
                    </div>
                    <div style="text-align:center">
                        <h5>如果有任何问题或建议可反馈至：<a href="https://github.com/dubox/jSearch/issues" target="_blank">issues@jSearch</a></h5>
                    </div>

                </Card>
            </div>
        </Drawer>
    </div>
    
    <script type="text/javascript" src="../public/hotkeys.min.js"></script>
    <script type="text/javascript" src="../content/search_bar_effect.js"></script>
    <script type="text/javascript" src="../content/search_bar.js"></script>
    <script type="text/javascript" src="../content/content.js"></script>
    <script type="text/javascript" src="options.js"></script>
    <iframe id="cz" src="" style="display:none;"></iframe>
    
</body>

</html>